<template>
  <div :class="[ns.b()]">
    <div :class="ns.e('search')">
      <div :class="ns.e('search-wrap')"><TableSearch /></div>
      <div :class="ns.e('button-wrap')">
        <el-space :size="buttonSpace" v-if="props.buttons.length">
          <template v-for="item in props.buttons" :key="item.key">
            <Button v-if="!item.hidden" :item="item" :type="item.type" :disabled="item.disabled" :change="item.change">{{ item.label }}</Button>
          </template>
        </el-space>
      </div>
    </div>
    <div :class="ns.e('main')">
      <vxe-table :data="tableData">
        <template v-for="item in props.columns" :key="item.field">
          <vxe-column v-if="item.type === 'seq'" type="seq" width="70"></vxe-column>
          <vxe-column v-else :field="item.field" :title="item.title"></vxe-column>
        </template>
      </vxe-table>
    </div>
    <div :class="ns.e('footer')"></div>
  </div>
</template>
<script lang="ts">
  export default { name: 'TableComponent' }
</script>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { useNamespace } from '@/hook/index'
  import type { PropsInterface } from './types/props'
  //props
  const props = withDefaults(defineProps<PropsInterface>(), {
    columns: () => [],
    buttons: () => [],
    buttonSpace: () => 10,
  })
  // 命名空间
  const ns = useNamespace('table-container')

  interface RowVO {
    id: number
    name: string
    role: string
    sex: string
    age: number
    address: string
  }

  const tableData = ref<RowVO[]>([
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
  ])
</script>

<style lang="scss" scoped>
  @include b(table-container) {
    height: 100%;
    display: flex;
    flex-direction: column;
    @include e(search) {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    @include e(main) {
      flex: 1;
      height: 0;
      padding: 12px 0;
    }
  }
</style>
